<template>


  <el-container>
    <div style=" position: fixed;
            height: 3rem;
            width: 100%;
            right: 0;
            top: 0;
            z-index: 999;//一直将导航栏置于最顶层
            background-color: white; //设置导航栏背景颜色"
    >
      <el-header>
        <div>
          <el-row style="text-align: center;">
            <el-col :span="24">
              <el-menu
                router="router"
                class="el-menu-demo"
                style="position:static;"
                mode="horizontal"
              >
                <el-row>
                  <el-col :span="4">
                    <el-menu-item>
                      <div>
                        <el-switch
                          v-model="editCompilation"
                          active-color="#13ce66"
                          inactive-color="#ff4949"
                          active-text="编辑"
                          inactive-text="浏览"
                        >
                        </el-switch>
                      </div>
                    </el-menu-item>
                  </el-col>
                  <el-col :span="4">
                    <el-submenu index="/blog">
                      <template slot="title">段落编辑</template>
                      <!--                      <el-menu-item > <el-button @click="createChapter()" type="primary " size="mini" style="margin-left: 10px">添加章节</el-button></el-menu-item>-->
                      <el-menu-item @click="createChapter()"> 添加章节</el-menu-item>
                      <!--                      <el-menu-item ><el-button @click="sortChapter()" type="primary " size="mini" style="margin-left: 10px">段落排序</el-button></el-menu-item>-->
                      <el-menu-item @click="sortChapter()">段落排序</el-menu-item>
                      <el-menu-item><a href="#id">去找喵星人</a></el-menu-item>
                    </el-submenu>
                  </el-col>
                  <el-col :span="4">
                    <!--                    <el-button @click="createCompilation(null,null)" type="primary" size="mini" style="margin-left: 10px">记录一下</el-button>-->
                    <el-menu-item @click="createCompilation(null,null)">记录一下</el-menu-item>
                  </el-col>
                  <el-col :span="2">
                    <el-menu-item @click="menuClick('随机检测','/note/RandomTesting?compilationId='+$route.query.id)">随机回顾
                    </el-menu-item>
                  </el-col>
                  <el-col :span="2">
                    <el-menu-item @click="visiblePopover = !visiblePopover ">搜索</el-menu-item>
                    <el-popover
                      placement="bottom"
                      width="600"
                      trigger="manual"
                      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                      v-model="visiblePopover"
                    >
                      <el-input style="width: 60%" v-model="searchStr"></el-input>
                      <el-button type="primary" plain round style="width: 20% ;margin-left: 0px" @click="searchNote"><i
                        class="el-icon-search"
                      ></i>搜索
                      </el-button>
                      <el-button type="primary" plain round style="width: 20%;margin-left: 0px"
                                 @click="()=>{searchStr='';searchNote()}"
                      ><i
                        class="el-icon-search"
                      ></i>重置
                      </el-button>
                      <!--                        <el-input slot="reference" style="width: 85%" v-model="searchStr"></el-input>-->
                      <!--                        搜索结果的弹出框里面的表格-->
                      <el-table :data="searchGridData" max-height="500">
                        <el-table-column label="操作" width="60">
                          <template slot-scope="scope">
                            <el-button
                              @click="toSearchPopoverHighLight('search_'+scope.row.id)"
                              type="success"
                              circle
                              icon="el-icon-position"
                              size="small"
                            >
                            </el-button>
                          </template>
                        </el-table-column>
                        <el-table-column property="content" label="内容">
                          <template slot-scope="scope">
                            <div class="gradeOver" v-html=" scope.row.content"></div>
                          </template>
                        </el-table-column>
                      </el-table>

                    </el-popover>
                  </el-col>
                  <el-col :span="4">
                    <el-menu-item @click="visibleCataloguePopover = !visibleCataloguePopover ">
                      目录
                    </el-menu-item>
                    <!--                    目录树弹窗-->
                    <el-popover
                      placement="bottom"
                      width="600"
                      trigger="manual"
                      content="这里是目录树"
                      v-model="visibleCataloguePopover"
                    >
                      <!--                      目录树-->
                      <el-tree
                        :data="this.chapterList"
                        show-checkbox
                        node-key="id"
                        default-expand-all
                        :expand-on-click-node="false"
                      >
                        <div class="custom-tree-node" style="width: 600px;height: 20px" slot-scope="{ node, data }">
                          <div style="width: 500px;display: inline-block;justify-content: center;">
                            <div style="float: left">
                              <el-button type="primary" size="mini" plain round
                                         @click="toChapterAddress(data)"
                              ><i
                                class="el-icon-search"
                              ></i>定位
                              </el-button>
                            </div>
                            <div style="float: left;line-height:20px">{{ data.chapterName }}</div>
                          </div>

                        </div>
                      </el-tree>


                    </el-popover>

                  </el-col>
                  <el-col :span="2">
                    <el-menu-item index="3" disabled>占个位子</el-menu-item>
                  </el-col>
                </el-row>
              </el-menu>
            </el-col>
            <!--            <el-col :span="2">-->
            <!--1111-->
            <!--            </el-col>-->
          </el-row>
        </div>
      </el-header>
      <div style="display: flex; justify-content: left;align-items: center;">
        <div style="float: left">
        </div>
        <div v-if="editCompilation" style="float: left">
        </div>
      </div>
    </div>
    <el-header height="100%" padding="0px" style="margin: 10px;">

      <div style="justify-content: center;display: flex;margin: 40px">
        <div style="font-size: 40px">《{{ this.compilation.title }}》</div>
      </div>
      <div style="justify-content: center;display: flex;">
        <img
          :src="this.compilation.coverImage"
          class="image" width="70%"
        >
      </div>
      <div style="margin-left: 100px;">创建时间：{{ compilation.createTime }}</div>
      <div style="margin-left: 100px;">合集描述：{{ compilation.descri }}</div>

    </el-header>
    <el-main style="margin: 4%;">

      <div>
        <div v-for="(chapter, index) in chapterList">

          <div style="border: #1c84c6">
            <!--              章节修改按钮-->
            <el-button type="primary"
                       icon="el-icon-edit"
                       circle
                       style="float: left" v-if="editCompilation"
                       @click="editChapter(chapter)"
            ></el-button>
            <!--           章节删除按钮   -->
            <el-button type="danger" icon="el-icon-delete" circle style="float: left;margin-left: 0px"
                       @click="deleteChapter(chapter)" v-if="editCompilation"
            ></el-button>
            <span :id="'chapter_'+chapter.id" class="titleSpan" style="padding-left: 6%">第{{
                chinesNum(index + 1)
              }}章    {{ chapter.chapterName }}
              </span>
            <div>

              <div direction="vertical" :active="chapter.noteList.length" style="margin: 20px">
                <div v-if="chapter.noteList" v-for="(item, index) in chapter.noteList">

                  <div style="margin: 8px">
                    <el-button type="primary"
                               icon="el-icon-edit"
                               circle
                               style=" float: left"
                               size="mini"
                               v-if="editCompilation"
                               @click="createCompilation(chapter,item)"
                    >
                    </el-button>
                    <el-popconfirm
                      confirm-button-text="想好了"
                      cancel-button-text="不用了"
                      icon="el-icon-info"
                      icon-color="red"
                      title="这条笔记确定从章节里删除吗？"
                      @confirm="deleteChapterStep(item)"
                      v-if="editCompilation"
                    >
                      <el-button type="danger"
                                 icon="el-icon-delete"
                                 circle
                                 style=" float: left;margin-left: 10px"
                                 size="mini"

                                 slot="reference"
                      >
                      </el-button>
                    </el-popconfirm>
                    <div style="border-left:3px solid  #1c84c6;margin-left: 30px;padding-left: 35px">
                      <i class="el-icon-s-opportunity" style="font-size: 23px"></i>
                      <span style="font-size: 23px;color: #ab2b1e">{{ index + 1 }}、</span>
                      <span style="font-size: 23px;color: #1c84c6" v-html="item.note.title"></span>
                    </div>
                    <div style="padding-left: 4%">
                      <div class="content" v-if="find(imageClassifyArr,item.note.classify)">
                        <img
                          :src=" item.note.content "
                          class="image" width="70%"
                        >
                      </div>
                      <div v-else>
                        <div style=" width: 100%" v-html="item.note.content">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <!--        随笔-->
        <div direction="vertical" :active="notQuoteNotes.length" style="margin: 20px">
          <span class="titleSpan" style="padding-left: 6%">看看还记录了什么~~
              </span>
          <div v-for="(item, index) in notQuoteNotes">
            <div style="margin: 8px">
              <el-button type="primary"
                         icon="el-icon-edit"
                         circle
                         style=" float: left"
                         size="mini"
                         v-if="editCompilation"
                         @click="updateCompilationStep(chapter,item)"
              ></el-button>

              <el-popconfirm
                confirm-button-text="想好了"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="这条笔记确定从合集里删除吗？"
                @confirm="deleteStep(item)"
                v-if="editCompilation"
              >
                <el-button type="danger"
                           icon="el-icon-delete"
                           circle
                           style=" float: left;margin-left: 10px"
                           size="mini"
                           slot="reference"
                >
                </el-button>
              </el-popconfirm>
              <!--              <el-button type="danger"-->
              <!--                         icon="el-icon-edit"-->
              <!--                         circle-->
              <!--                         style=" float: left"-->
              <!--                         size="mini"-->
              <!--                         v-if="editCompilation"-->
              <!--                         @click="deleteStep(item)"-->
              <!--                         slot="reference"-->
              <!--              >-->
              <!--              </el-button>-->
              <div style="border-left:3px solid  #1c84c6;margin-left: 30px;padding-left: 35px">
                <i class="el-icon-s-opportunity" style="font-size: 23px"></i>
                <span style="font-size: 23px;color: #1c84c6" v-html="item.note.title"></span>
              </div>
              <div style="padding-left: 4%">
                <div class="content" v-if="find(imageClassifyArr,item.note.classify)">
                  <!--                  <i class="el-icon-s-opportunity" style="font-size: 23px"></i>-->
                  <img
                    :src=" item.note.content "
                    class="image" width="70%"
                  >
                </div>
                <div v-else>
                  <div style=" width: 100%" v-html="item.note.content">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <a id="id"> </a>
    <!--    添加记录-->
    <el-dialog v-if="open" :title="title" :visible.sync="open" width="1000px" append-to-body :fullscreen="true">
      <addNote v-if="open" @getList="()=>{}" @notOpen="notOpen" @addNote="addNote" :title="title" :open="open"
               :_note="step"
               @updateNode="updateNode"
               :defaultClassify="defaultClassify" :_chapterList="chapterList"
      />
    </el-dialog>
    <!--    添加段落-->
    <el-dialog
      v-if="openChapter"
      :title="title"
      :visible.sync="openChapter"
      width="30%"
      :before-close="handleChapterClose"
      center
      :fullscreen="true"
    >
      <el-form :inline="true" :model="chapter" class="demo-form-inline">
        <el-form-item label="类型">
          <el-select v-model="chapter.chapterType" placeholder="类型">
            <el-option
              v-for="item in classifyOption"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="chapter.chapterName" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="引入记录">
          <el-button type="primary"
                     icon="el-icon-edit"
                     @click="bringInNote"
          ></el-button>
        </el-form-item>
      </el-form>
      <el-dialog v-if="bringInNoteVisible" :modal="false" width="80%"
                 title="引入记录" :visible.sync="bringInNoteVisible"
      >
        <index :isBringInNote="true" @chooseNoteIds="chooseNoteIds"></index>
      </el-dialog>
      <div>

        <!--        分割线-->
        <el-divider>可更改记录排序哦~</el-divider>
        <!--        记录排序-->
        <draggable v-model="chapter.noteList" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
                   @start="onStart" @end="onEnd"
        >
          <transition-group>
            <div v-for="(item, index) in chapter.noteList" class="titleSpan" style="padding-left: 6%"
                 :key="'sort'+item.note.id"
            >
              <div
                style="border-left:3px solid  #1c84c6;;padding-left: 10px;display: flex; justify-content: left;align-items: center;height: 50px"
              >
                <el-button type="danger"
                           icon="el-icon-delete"
                           style=" float: left"
                           size="mini"
                           @click="removeStep(item)"
                ></el-button>
                <!--                <i class="el-icon-s-opportunity" style="font-size: 23px"></i>-->
                <span class="spanOver" style="font-size: 23px;color: #1c84c6">{{ item.note.title }}</span>
              </div>
            </div>
          </transition-group>
        </draggable>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="openChapter = false">取 消</el-button>
    <el-button type="primary" @click="addChapter()">确 定</el-button>
            </span>
    </el-dialog>

    <!--    段落排序-->
    <el-dialog v-if="sortChapterVisit" title="段落排序" :visible.sync="sortChapterVisit" :close-on-click-modal="false"
               :show-close="false"
    >

      <!--使用draggable组件段落排序-->
      <draggable v-model="chapterList" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
                 @start="onStart" @end="onEnd"
      >
        <transition-group>
          <div v-for="(chapter, index) in chapterList" class="titleSpan" style="padding-left: 6%" :key="chapter.id">
                      <span>第{{
                          chinesNum(index + 1)
                        }}章    {{ chapter.chapterName }}
              </span>
          </div>
        </transition-group>
      </draggable>


      <span slot="footer" class="dialog-footer">
            <el-button @click="sortChapterVisit = false">取 消</el-button>
            <el-button type="primary" @click="sortChapterVerify">确 定</el-button>
      </span>
    </el-dialog>

  </el-container>
</template>

<script>
import {addStep, getNotQuoteChapter} from '@/api/compilation/step'
import {getNote, toChinesNum} from '@/api/note/note'
import {getCompilation} from '@/api/compilation/compilation'
import addNote from './../addNote'
import NoteDetail from './NoteDetail'
import {Base64} from 'js-base64'
import {listData} from '@/api/system/dict/data'
import {addChapter, batchAddChapter, delChapter, listChapter} from '@/api/note/chapter'
import draggable from 'vuedraggable'
import index from './../index'
import popoverHighLight from '@/views/note/note/compilation/popoverHighLight'

export default {
  name: 'CompilationStep',
  components: {NoteDetail, addNote, draggable, index, popoverHighLight},
  data() {
    return {
      //編輯的開關
      editCompilation: false,
      // 展示目录树
      visibleCataloguePopover: false,
      //打开引入记录的弹出看
      bringInNoteVisible: false,
      //打开段落排序
      sortChapterVisit: false,
      currentDate: new Date(),
      compilation: {},
      open: false,
      openChapter: false,
      step: null,
      title: '添加',
      defaultClassify: 109,
      imageClassifyArr: [110],
      chapterList: [],
      notQuoteNotes: [],
      classifyOption: [],
      searchStr: '',
      chapter: {
        chapterType: 113,
        chapterName: '',
        noteList: []
      },
      //正则表达式
      // regHead: /<(\S*?)highlight[^>]*>/g,
      regHead: /<PopoverHighLight[^>]*>.*?|<.*? \/>/gi,
      // regHead: /<popoverhighlight[^>]*>/g,
      //<(\S*?)highlight[^>]*>.*?|<.*? />
      regFoot: /<.PopoverHighLight>/gi,
      //  排序
      drag: false,
      //展示弹出框
      visiblePopover: false,
      //搜索出来的数据
      searchGridData: []
    }
  },
  created() {
    //获取章的字典
    listData({'dictType': 'chapter_type', 'pageSize': 99999}).then(response => {
      this.classifyOption = response.rows
    })
    //
    const id = this.$route.query.id
    this.getListChapter()
    getCompilation(id).then((res) => {
      this.compilation = res.data
      console.log(res.data)
    })

  }
  ,

  methods: {

    //跳转页面
    menuClick(title, eventName) {
      this.$tab.openPage(title, eventName)
      console.log(' menuClick(eventName)', eventName)
      // this.$emit('closeLogin')
      //关闭菜单的方法
      // this.$emit('closeMenuAndFloating')
      this.isCollapse = 0
    },

    //跳转到搜索高亮处
    toSearchPopoverHighLight(searchId) {

      console.log('searchId---', searchId)
      // 清除以前的闪烁动画
      this.searchGridData.forEach(grid => {
        let target = document.querySelector('#search_' + grid.id)
        if (target) {
          target.classList.remove('blink')
        }
      })
      let target = document.querySelector('#' + searchId)
      //跳转
      console.log('setInterval----->setInterval')
      if (target) {
        target.classList.add('blink')
        // clearInterval(inter)
        //定位到指定距离顶部的距离
        let headerOffset = 100
        let elementPosition = target.getBoundingClientRect().top
        let offsetPosition = elementPosition + window.pageYOffset - headerOffset
        window.scrollTo({
          top: offsetPosition,
          behavior: 'smooth'
        })
      }
    },
    //页面搜索
    searchNote() {
      this.searchChapterNote()
      this.searchNotChapterNote()
      this.$forceUpdate()
    }
    ,
    //搜索关联了章节的记录
    searchChapterNote() {
      console.log('--->', this.searchStr)
      this.searchGridData = []
      //清除所有的高亮
      this.chapterList.forEach(chapter => {
        chapter.noteList.forEach(step => {
          this.clearStepHighlight(step)
        })
      })
      if (this.searchStr) {
        //搜索并高亮
        this.chapterList.forEach(chapter => {
          chapter.noteList.forEach(step => {
            this.stepHighlight(step)
          })
        })
      }
    }
    ,
    searchNotChapterNote() {
      console.log('--->', this.searchStr)
      //清除所有的高亮
      this.notQuoteNotes.forEach(step => {
        this.clearStepHighlight(step)
      })
      if (this.searchStr) {
        //搜索并高亮
        this.notQuoteNotes.forEach(step => {
          this.stepHighlight(step)
        })
      }
    },
    //跳转到指定的目录
    toChapterAddress(item) {
      console.log('toChapterAddress', item.id)
      let target = document.querySelector('#chapter_' + item.id)
      //跳转
      if (target) {
        // clearInterval(inter)
        // target.scrollIntoView({block: "center", inline: "nearest"})
        //定位到指定距离顶部的距离
        let headerOffset = 60
        let elementPosition = target.getBoundingClientRect().top
        let offsetPosition = elementPosition + window.pageYOffset - headerOffset
        window.scrollTo({
          top: offsetPosition,
          behavior: 'smooth'
        })
      }
    }
    ,
    //清除高亮
    clearStepHighlight(step) {
      this.matchStepHighlightStr(step.note)
      this.matchStepHighlightStr(step.note)
    },
    //正则匹配删除字符串
    matchStepHighlightStr(note) {
      if (note.title) {
        // console.log('---step.note.之前--', note.title)
        // console.log('---step.note.匹配--', note.title.match(this.regFoot))
        const matchBegin = note.title.match(this.regHead)
        if (matchBegin) {
          matchBegin.forEach(str => {
            note.title = note.title.replace(str, '')
          })
        }
        // console.log('---step.note.之后--', note.title)
        const matchEnd = note.title.match(this.regFoot)
        if (matchEnd) {
          matchEnd.forEach(str => {
            note.title = note.title.replace(str, '')
          })
        }
      }
      if (note.content) {
        // console.log('---step.note.之前--', note.content)
        // console.log('---step.note.匹配--', note.content.match(this.regFoot))
        const matchBegin = note.content.match(this.regHead)
        if (matchBegin) {
          matchBegin.forEach(str => {
            note.content = note.content.replace(str, '')
          })
        }
        // console.log('---step.note.之后--', note.content)
        const matchEnd = note.content.match(this.regFoot)
        if (matchEnd) {
          matchEnd.forEach(str => {
            note.content = note.content.replace(str, '')
          })
        }
      }
    },
    //让搜索到的step高亮
    stepHighlight(step) {
      // console.log('--->', step)
      let searchStrBase64Key = Base64.encode(this.searchStr)
      //字符串出现的次数
      let strHasCount = 0
      console.log('searchStrBase64Key', searchStrBase64Key)
      let title = step.note.title
      if (title.indexOf(this.searchStr) !== -1) {
        //定义全局唯一id
        const id = Math.floor(Math.random() * 100000000)
        this.handleSearchGrid(title, id)
        for (let i = 0; ; i++) {
          if (title.indexOf(this.searchStr) === -1) {
            break
          }
          title = title.replace(this.searchStr, searchStrBase64Key)
          strHasCount++
        }
        console.log('strHasCount', strHasCount)
        for (let i = 0; i < strHasCount; i++) {
          step.note.title = title.replace(searchStrBase64Key, '<PopoverHighLight class="highlight modal" :visible="true" id="search_' + id + '_' + i + '">' + this.searchStr + '</PopoverHighLight>')
          title = step.note.title
        }
      }
      //重新赋值到0
      strHasCount = 0
      let content = step.note.content
      if (content) {
        if (content.indexOf(this.searchStr) !== -1) {
          //定义全局唯一id
          const id = Math.floor(Math.random() * 100000000)
          this.handleSearchGrid(content, id)

          for (let i = 0; ; i++) {
            if (content.indexOf(this.searchStr) === -1) {
              break
            }
            content = content.replace(this.searchStr, searchStrBase64Key)
            strHasCount++
          }
          console.log('strHasCount', strHasCount)
          for (let i = 0; i < strHasCount; i++) {
            step.note.content = content.replace(searchStrBase64Key, '<PopoverHighLight class="highlight modal" :visible="true" id="search_' + id + '_' + i + '">' + this.searchStr + '</PopoverHighLight>')
            content = step.note.content
          }
        }
      }
    }
    ,
    handleSearchGrid(content, id) {
      let regHtml = /<(\S*?)[^>]*>/g
      const matchArr = content.match(regHtml)
      if (matchArr) {
        matchArr.forEach(str => {
          content = content.replace(str, '')
        })
      }
      let split = content.split(this.searchStr)
      for (let i = 0; i < split.length; i++) {
        if (i === split.length - 1) {
          continue
        }

        let searchContentStr = this.searchStr
        let beginStr = split[i]
        let endStr = split[i + 1]
        let beginStrLength = 0
        let searchStrLength = this.searchStr.length
        let verifyBeginStr = ''
        let verifyEndStr = ''
        //计算前面的 先计算前面的字符串有多少，有7个以上就截取7个，没有就全部使用
        if (beginStr.length < 7) {
          verifyBeginStr = beginStr
          beginStrLength = beginStr.length
        } else {
          beginStrLength = 7
          verifyBeginStr = beginStr.substr(beginStr.length - 7, beginStr.length)
        }
        //计算后面的   判断后面的字符串的长度是否足够40个足够就直接截取
        if (endStr.length < 40 - searchStrLength - verifyBeginStr) {
          verifyEndStr = endStr
          // verifyEndStr = beginStr.substr(endStr.length - 7, endStr.length)
          if (40 - verifyEndStr.length - beginStr.length - searchStrLength > 0) {
            verifyBeginStr = beginStr
          } else {
            verifyBeginStr = beginStr.substr(40 - verifyEndStr.length - searchStrLength, beginStr.length)
          }
        } else {
          verifyEndStr = endStr.substr(0, 40 - searchStrLength - beginStrLength)
        }
        this.searchGridData.push({
          'id': id + '_' + i,
          'content': verifyBeginStr + '<span style="color: red">' + searchContentStr + '</span>' + verifyEndStr
        })
      }
    },

//引入记录
    bringInNote() {
      this.bringInNoteVisible = true
    }
    ,
//确认排序
    sortChapterVerify() {

      let data = [...this.chapterList]

      data.forEach(e1 => {
        if (e1.noteList) {
          e1.noteList.forEach(e2 => {
            e2.content = null
          })
        }
      })
      batchAddChapter(data).then(res => {
        this.sortChapterVisit = false
        this.$message({
          message: '段落排序完成',
          type: 'success'
        })
      })
    }
    ,
//编辑段落
    editChapter(chapter) {
      this.openChapter = true
      this.chapter = chapter

    }
    ,
//开始拖拽事件
    onStart() {
      this.drag = true
    }
    ,
//拖拽结束事件
    onEnd() {
      this.drag = false
    }
    ,
    chinesNum(num) {
      return toChinesNum(num)
    }
    ,
    recursionStepInfo(row, chapter) {
      if (row.length === 0) {
        return
      }
      const pop = row.pop()
      this.getNoteCurrent(pop.noteId).then((e1 => {
        e1.content = e1.content ? Base64.decode(e1.content) : null
        pop.note = e1
        chapter.noteList.push(pop)
        this.recursionStepInfo(row, chapter)
      }))

    }
    ,
    getListChapter() {
      this.chapterList = []
      const id = this.$route.query.id
      listChapter({'compilationId': id, 'pageSize': 9999}).then((res) => {
        this.recursionChapterInfo(res.rows.slice().reverse())
      })
      getNotQuoteChapter(id).then(res => {
        this.notQuoteNotes = []
        this.recursionNotQuoteChapter(res.data)

      })
    }
    ,
    recursionNotQuoteChapter(notQuoteChapters) {
      if (notQuoteChapters.length === 0) {
        return
      }
      const step = notQuoteChapters.pop()
      getNote(step.noteId).then(res => {
        let note = res.data
        this.notQuoteNotes.push(step)
        note.content = note.content ? Base64.decode(note.content) : null
        step.note = note
        this.recursionNotQuoteChapter(notQuoteChapters)
      })
    }
    ,
    recursionChapterInfo(chapters) {
      if (chapters.length === 0) {
        return
      }
      const chapter = chapters.pop()
      chapter.noteList = []
      this.chapterList.push(chapter)
      this.recursionStepInfo(chapter.zoneCompilationSteps.slice().reverse(), chapter)
      this.recursionChapterInfo(chapters)
    }
    ,
    createCompilation(chapter, step) {
      this.title = '添加笔记'
      if (chapter !== null && step !== null) {
        step.chapterId = chapter.id
      }
      if (step !== null) {
        this.step = step
      }
      console.log('createCompilation传入的记录', step)
      //这里转换类型字典
      if (this.compilation.classify === 117) {
        this.defaultClassify = 125
      }
      this.open = true
    }
    ,
    updateCompilationStep(chapter, item) {
      this.title = '修改笔记'
      this.step = item
      console.log('updateCompilationStep传入的记录', this.step)
      this.open = true
    }
    ,
//创建章节
    createChapter() {
      const id = this.$route.query.id
      this.title = '添加章节'
      this.openChapter = true
    }
    ,
//段落排序
    sortChapter() {
      this.sortChapterVisit = true
    }
    ,
    addNote(note) {

      console.log('添加的note', note.data)
      addStep({
        'noteId': note.data.id,
        'compilationId': this.$route.query.id,
        'chapterId': note.data.chapterId
      }).then((e) => {
        // this.getListChapter()
        this.chapterList.forEach(chapter => {
          let step = e.data
          if (chapter.id === note.data.chapterId) {
            note.data.content = note.data.content ? Base64.decode(note.data.content) : null
            step.note = note.data
            chapter.noteList.push(step)
          }
        })
      })

    }
    ,
//更细节点之后要做的事
    updateNode(form) {
      addStep(form).then(res => {
        // debugger
        form.note.content = form.note.content ? Base64.decode(form.note.content) : null
        this.$forceUpdate()
        for (let i = 0; i < this.chapterList.length; i++) {
          //刷新已关联的数据
          if (this.chapterList[i].noteList) {
            //todo 万一改变了段落，需要修改段落
            this.chapterList[i].noteList.forEach(step => {
              // debugger
              if (step.id === form.id) {
                // step.note = form.note
                // step.note.content = step.note.content ? Base64.decode(step.note.content) : null

              }
            })
          }
        }
        console.log('chapterList=>{', this.chapterList)
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      })
      // this.getListChapter()
    }
    ,
//删除段落引用
    deleteChapterStep(item) {
      let chapterId = item.chapterId
      item.chapterId = null
      addStep(item).then(res => {
        // this.getListChapter()
        //筛选出要删除的数据
        for (let i = 0; i < this.chapterList.length; i++) {
          if (this.chapterList[i].id === chapterId) {
            let noteList = this.chapterList[i].noteList
            if (noteList) {
              // debugger
              noteList = noteList.filter(step => step.note.id !== item.note.id)
              this.chapterList[i].noteList = noteList
            }
          }
        }
        this.notQuoteNotes.unshift(item)
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      })

    }
    ,
//删除引用
    deleteStep(item) {

      let chapterId = item.chapterId
      let compilationId = item.compilationId
      item.chapterId = null
      item.compilationId = null
      addStep(item).then(res => {
        this.notQuoteNotes = this.notQuoteNotes.filter(step => step.note.id !== item.note.id)
        // this.getListChapter()
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      })
    }
    ,
    notOpen() {
      this.open = false
      this.step = null
    }
    ,
//查找某个元素是否存在
    find(arr, val) {
      let value = arr.indexOf(val)
      // console.log("find(arr,val){",value!==-1)
      return value !== -1
    }
    ,
    async getNoteCurrent(id) {
      return (await getNote(id)).data
    }
    ,
    handleChapterClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.chapter = {
            chapterType: 113,
            chapterName: '',
            noteList: []
          }
        })
        .catch(_ => {
        })
    }
    ,
//添加章节
    addChapter() {
      // debugger
      this.chapter.compilationId = this.compilation.id
      let data = JSON.parse(JSON.stringify(this.chapter))
      if (data.noteList) {
        data.noteList.forEach(e => {
          e.note = {}
        })
      }
      if (data.zoneCompilationSteps) {
        data.zoneCompilationSteps.forEach(e => {
          e.note = {}
        })
      }
      let isAddChapter = false
      // 判断是否是空来表示新增还是添加
      if (!this.chapter.id) {
        isAddChapter = true
      }
      addChapter(data).then(res => {
        this.$message({
          message: '添加段落成功',
          type: 'success'
        })
        this.chapter = {
          chapterType: 113,
          chapterName: '',
          noteList: []
        }
        this.openChapter = false
        //重新加载段落
        // this.getListChapter()

        res.data.noteList = []
        // this.chapterList.push(res.data)
        //段落添加到页面上
        if (isAddChapter) {
          this.chapterList.push(res.data)
        }
      })

    }
    ,
//删除段落
    deleteChapter(chapter) {
      this.$confirm('确认删除段落：' + chapter.chapterName + '？')
        .then(_ => {
          delChapter(chapter.id).then(res => {
            console.log('delChapter', res)
            if (res.code === 200) {
              this.$message({
                message: '添加删除成功',
                type: 'success'
              })
              //重新加载段落
              this.chapterList = this.chapterList.filter(step => step.id !== chapter.id)
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
              done()
            }
          })
        })
        .catch(_ => {
        })

    }
    ,
//  引入选择的ids
    chooseNoteIds(ids) {
      ids.forEach(id => {
        getNote(id).then(res => {
          const data = res.data
          data.content = data.content ? Base64.decode(data.content) : null
          let step = {
            'noteId': data.id,
            'compilationId': this.$route.query.id,
            'chapterId': this.chapter.id,
            'note': data
          }
          this.chapter.noteList.push(step)
        })
      })
      this.bringInNoteVisible = false
    }
    ,
    removeStep(note) {
      this.chapter.noteList.splice(this.chapter.noteList.indexOf(note), 1)
    }
  },
  render(createElement, context) {

  }

}
</script>

<style scoped>
/deep/ .el-step__description {
  padding-right: 0%;
  font-weight: normal;
}

.titleSpan {
  font-size: 30px;
  display: block;
  background-color: #23EE7AFF
}

/deep/ .el-main img {
  width: 100%;
}

.el-button--medium.is-circle {
  padding: 12px;
}

.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}

/*选中样式*/
.chosen {
  border: solid 2px #3089dc !important;
}

/deep/ .highlight {
  color: red;
  /*鼠标移上去变手*/
  cursor: pointer;
}

/deep/ .modal222 {
  position: fixed;
  top: 101px;
  left: 101px;
  right: 101px;
  bottom: 101px;
  background: white;
  display: block;
}

/deep/ .modal {
  background-color: #fff;
  position: relative;
  /*width: 40px;*/
  /*height: 204px;*/
  /*margin: 50px;*/
  filter: drop-shadow(0px 2px 8px rgba(198, 198, 198, 0.5));
  /* box-shadow: 0px 2px 8px 0px rgba(198, 198, 198, 0.5); */
}

/deep/ .modal::after {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(50% - 20px);
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-bottom-color: #e31313;
}

/deep/ .blink {
  animation: blink 1s ease infinite;
}

@keyframes blink {
  to {
    color: transparent;
  }
}

/deep/ .spanOver {

  white-space: nowrap; /*强制单行显示*/
  text-overflow: ellipsis; /*超出部分省略号表示*/
  overflow: hidden; /*超出部分隐藏*/
  width: 90%; /*设置显示的最大宽度*/
}

/deep/ .gradeOver {
  white-space: nowrap; /*强制单行显示*/
  text-overflow: ellipsis; /*超出部分省略号表示*/
  overflow: hidden; /*超出部分隐藏*/
}
</style>
